import React, { useState } from 'react';
import Navbar from '../components/navbar';
import MenuAvatar from '@/components/menuAvatar';
import News from '@/components/myNews';


const myNews = () => {
  const [menuHeight, setMenuHeight] = useState(0);
  
  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100vh', width: '100vw', margin: 0, padding: 0, overflowX: 'hidden' }}>
      {/* MenuAvatar 始终在顶部 */}
      <div style={{ backgroundColor: '#ececec' }}>
        <MenuAvatar onHeight={setMenuHeight} />
      </div>
      {/* 下面的区域分为左侧 Navbar 和右侧 Content */}
      <div style={{ display: 'flex', flexDirection: 'row', flexGrow: 1 }}>
        {/* Navbar 在左侧，固定宽度 */}
        <div style={{ width: '256px', backgroundColor: '#ececec', overflowY: 'auto', display: 'flex', flexDirection: 'column' }}>
          <Navbar />
        </div>
        {/* Content 占据剩余空间 */}
        <div style={{ flexGrow: 1, backgroundColor: '#f0f2f5', padding: '20px' }}>
          <News />
        </div>
      </div>
    </div>
  );

};

export default myNews;


// return (
//   <div style={{ display: 'flex', flexDirection: 'column', height: '100vh', width: '100vw', margin: 0, padding: 0, overflowX: 'hidden' }}>
//     <MenuAvatar onHeight={setMenuHeight} />
//     <div style={{ display: 'flex', flexDirection: 'row', width: '100%', height: `calc(100vh - ${menuHeight}px)`, backgroundColor: '#ececec', margin: 0, padding: 0 }}>
//       <Navbar />
//       <News />
//     </div>
//   </div>
// );